<template>
	<Popup
		class="login-sex"
		title="请选择性别"
		btnText="下一步"
		@clickBtn="onclickNext"
		@close="$emit('close')"
	>
		<div class="sex-range">
			<div
				class="center"
				v-for="item in sexRange"
				:key="item.value"
				@click="selectSex=item.value"
			>
				<Button
					class="sex-item"
					:class="selectSex === item.value ? 'active' : ''"
					bgColor="#EFF3F3"
					width="220"
					height="200"
				>
					<img	:src="item.img">
				</Button>
				<p>{{item.label}}</p>
			</div>
		</div>
	</Popup>
</template>

<script>
export default {
  data() {
    return {
      sexRange: [
        { label: '男孩', value: 1, img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220502150044327-Group 40.png' },
        { label: '女孩', value: 0, img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220502150044327-Group 39.png' },
      ],
      selectSex: null
    }
  },
  methods: {
    onclickNext() {
      if (this.selectSex !== null) {
        /* 选择年龄也是改变role */
        this.$emit('nextStep', { sex: this.selectSex })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.login-sex {
  .sex-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 32px;
    padding: 0 34px;
    margin-top: 62px;

    p {
      margin-top: 20px;
      color: #003e34;
    }

    .sex-item {
      border: 3px solid transparent;

      &.active {
        border-color: $primary2;
      }
    }
  }
}
</style>
